<template>
	<div class="recommand-list">
		<div class="recommand-item"
			v-animate="{active: 'active', topHeight: groupTopHeight}"
			v-for="item in topList"
			:key="item.projectId"
			@click="handleCheckoutWork(item.projectId)">
			<div class="recommand-image-wrapper" :style="{height: deviceWidth + 'px'}">
				<div class="recommand-image-container"
					:style="{
						backgroundImage: 'url(' + item.coverUrl + ')',
						backgroundSize: 'cover',
						backgroundPosition: '50%'
					}">

					<!-- <img
						class="recommand-image"
						:src="item.coverUrl"
					/> -->
				</div>
			</div>
			<div class="recommand-mask">
				<div class="recommand-mask-text">
					<div class="recommand-mask-name">{{ item.name }}</div>
					<div class="recommand-mask-category">{{ item.nameEn }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			active: 'active'
		}
	},
	computed: {
		...mapGetters(['topList', 'deviceWidth', 'groupTopHeight']),
		showTopList() {
			return this.topList && this.topList.length;
		}
	},
	created() {},
	methods: {
		handleCheckoutWork(slug) {
			let query = !this.$route.query.cat_id ? {cat_id: 'areaFlag'} : this.$route.query;
			this.$router.push({
				// name: "WorkDetail",
				// params: {
				// 	slug
				// },
				path: "works/detail",
				query: {...query, detail_id: slug}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.recommand-list {
	// padding: 25px 25px;
	padding: 0;
}
.recommand-item {
	position: relative;
	width: 100%;
	// margin-bottom: 30px;
	&.active {
		.recommand-mask {
			opacity: 0.8;
		}
		.recommand-image-container {
			width: 100%;
			filter: blur(3px);
			overflow: hidden;
		}
	}
}
.recommand-image-wrapper {
	width: 100%;
	// height: 325px;
	font-size: 0;
	overflow: hidden;
	.recommand-image-container {
		width: 100%;
		height: 100%;
		font-size: 0;
		.recommand-image {
			width: 100%;
			// height: 220px;
			position: relative;
		}
	}
}
.recommand-mask {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	color: #000000;
	opacity: 0;
	transition: opacity 0.5s;
	backdrop-filter: blur(12px);
	.recommand-mask-text {
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: 30px;
		line-height: 1;
		.recommand-mask-category {
			margin-top: 3px;
			line-height: 17px;
			font-size: 12px;
			font-weight: 400;
		}
	}
}
</style>